<template>
    <div class="layout">
        <Layout style="height:100vh">
            <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
                <div class="layout-logo-left ">
                    <slot name="logo">
                        <span> 我是loge</span>
                    </slot>
                </div>

                <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
                    <MenuItem name="1">
                    <Icon type="ios-navigate"></Icon>
                    <template v-if="!isCollapsed">Item 1</template>
                    </MenuItem>
                    <MenuItem name="2">
                    <Icon type="ios-keypad"></Icon>
                    Item 2
                    </MenuItem>
                    <MenuItem name="3">
                    <Icon type="ios-analytics"></Icon>
                    Item 3
                    </MenuItem>
                    <MenuItem name="4">
                    <Icon type="ios-paper"></Icon>
                    Item 4
                    </MenuItem>
                </Menu>
            </Sider>

            <Layout>
                <Header :style="{padding: 0}" class="layout-header-bar">
                    <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
                </Header>
                <Layout :style="{padding: '0 24px 0 '}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <BreadcrumbItem>Home</BreadcrumbItem>
                        <BreadcrumbItem>Components</BreadcrumbItem>
                        <BreadcrumbItem>Layout</BreadcrumbItem>
                    </Breadcrumb>
                    <Content :style="{margin: '20px 0', background: '#fff', minHeight: '260px'}">
                        <slot></slot>
                    </Content>
                </Layout>

            </Layout>
        </Layout>
    </div>
</template>
<script lang="ts">
import Vue from "vue";
import iview from "iview";
import { Sider, MenuItem } from "iview";

export default Vue.extend({
    data() {
        return {
            isCollapsed: false
        };
    },
    computed: {
        rotateIcon: function() {
            return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
        },
        menuitemClasses: function() {
            return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
        }
    },
    methods: {
        collapsedSider() {
            this.isCollapsed = !this.isCollapsed;
        }
    }
});
</script>
<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100vh;
}
.layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
    height: 64px;
    overflow: hidden;
    color: white;
}
.menu-icon {
    transition: all 0.3s;
}
.rotate-icon {
    transform: rotate(-90deg);
}
.menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width 0.2s ease 0.2s;
}
.menu-item i {
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span {
    width: 0px;
    transition: width 0.2s ease;
}
.collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
}
</style>